/**
 * 首页
 * huruqing
 */


var homeView = {
    // 请求数据的方法
    getFilmList: function() {
        var self = this;
        // var url = '../data/getList.json';
        var url = 'http://localhost:3000/getList';
        $.ajax({
            type: 'get',
            url: url,
            data: {},
            dataType: 'json',
            // success方法是请求成功后自动调用的方法, jq规定的
            success: function(res) {
                // 调用渲染列表的方法来渲染列表 
                var list = res.films;
                self.renderList(list);
                // 渲染轮播图
                self.carousel(res.banners);
            }
        });
    },

    // 渲染电影列表,
    renderList: function(list) {
        var str = '';
        list.forEach(function(item, index) {
            str += `   <a class="item bd-gray flex jc-sb pt-15" href="./detail.html?filmId=${item.filmId}">
                <div class="film flex jc-sa ml-10">
                        <img src="${item.poster}" class="image ">
                        <div class="ml-10  lh15">
                            <p class="f16">波西米亚狂想曲 <span class="type">2D</span></p>
                            <p class="f14 gray">观众评分 <span class="yellow">7</span> </p>
                            <p class="f14 gray actor">主演：布莱恩·辛格 拉米·马雷克 本·哈迪 约瑟夫·梅泽罗</p>
                            <p class="f14 gray">英国 美国 | 135分钟</p>
                        </div>
                    </div>
                    <div class="buttbox">
                        <button class="butt mr-10">购票</button>
                    </div>   
                </a>`;
        });
        document.querySelector('.list').innerHTML = str;
    },

    // 渲染轮播图
    carousel: function(imgList) {
        var str = '';
        imgList.forEach(function(item) {
            str += `  <div class="swiper-slide">
                    <img id="lunbotu" src="${item.url}" width="100%" height="100%" />
                </div>`;
        })
        document.querySelector('.swiper-wrapper').innerHTML = str;


        var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        })
    }
}
homeView.getFilmList();